
const {src, dest, parallel, series, watch} = require('gulp')
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins() //自动加载插件
const borwserSync = require('browser-sync') 
const bs = borwserSync.create()//自动打开浏览器
// const sass = require('gulp-sass')
// const babel = require('gulp-babel')
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')
// const clean = require('gulp-clean')

const data = {
    //模拟模板文件里的数据
    menus: [
      {
        name: 'Home',
        icon: 'aperture',
        link: 'index.html'
      },
      {
        name: 'Features',
        link: 'features.html'
      },
      {
        name: 'About',
        link: 'about.html'
      },
      {
        name: 'Contact',
        link: '#',
        children: [
          {
            name: 'Twitter',
            link: 'https://twitter.com/w_zce'
          },
          {
            name: 'About',
            link: 'https://weibo.com/zceme'
          },
          {
            name: 'divider'
          },
          {
            name: 'About',
            link: 'https://github.com/zce'
          }
        ]
      }
    ],
    pkg: require('./package.json'),
    date: new Date()
  }
const style = () => {
    return src('src/assets/styles/*.scss',{base: 'src'})
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest('temp'))
}

const script = () => {
    return src('src/assets/scripts/*.js',{base: 'src'})
    .pipe(plugins.babel({
        presets:['@babel/env']
    }))
    .pipe(dest('temp'))
}

const page = () => {
    return src('src/**/*.html',{base: 'src'})
    .pipe(plugins.swig({
        defaults:{cache:false},
        data
    }))
    .pipe(dest('temp'))
}

const image = () => {
    return src('src/assets/images/**',{base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**',{base: 'src'})
  .pipe(plugins.imagemin())
  .pipe(dest('dist'))
}

const extra = () => {
  return src('/public/**',{base: 'public'})
  .pipe(dest('dist'))
}

const clean = () => {
  return src(['dist','temp'])
  .pipe(plugins.clean())
}

const serve = () => {
  //监听src下的文件变化更新浏览器
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)

  bs.init({
    notify: false,
    port: 3000,
    //files:'dist/**',//监听dist文件下有改动的时候刷新页面
    server: {
      baseDir: ['temp','dist','public'],
      routes: {
        '/node_modules': 'node_modules' //自动映射到项目下的node_modules
      }
    }
  })
}

const useref = () => {
  return src('temp/*.html',{base: 'temp'})
  .pipe(plugins.useref({
    searchPath:['temp','.']  //查找资源的地址
  }))
  .pipe(plugins.if(/\.js$/, plugins.uglify()))
  .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  .pipe(plugins.if(/\.html$/, plugins.htmlmin({ 
      collapseWhitespace: true,
      minifyCSS: true, //页面里的style和js脚本压缩
      minifyJS: true
  }))) //html
  .pipe(dest('dist')) 
  //生成到dist可能会出现问题，同时段的写入和压缩可能导致文件丢失的问题
}

const complie = parallel(style, script, page)
const start = series(complie, serve)
const build = series(clean, parallel(series(complie, useref),extra, image, font))

module.exports = {
  complie,
  build,
  start,
  clean,
  serve,
  useref
}